<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .stepIn{
        text-indent: 20px;
    }
    @keyframes step-in {
        
    }
</style>
<body>
    <p class="stepIn">
        长相思，在长安。
        络纬秋啼金井阑，微霜凄凄簟色寒。
        孤灯不明思欲绝，卷帷望月空长叹。
        美人如花隔云端。
        上有青冥之长天，下有渌水之波澜。
        天长路远魂飞苦，梦魂不到关山难。
        长相思，摧心肝。

        日色欲尽花含烟，月明欲素愁不眠。
        赵瑟初停凤凰柱，蜀琴欲奏鸳鸯弦。
        此曲有意无人传，愿随春风寄燕然。
        忆君迢迢隔青天。
        昔时横波目，今作流泪泉。
        不信妾肠断，归来看取明镜前。

        美人在时花满堂，美人去后花馀床。
        床中绣被卷不寝，至今三载闻余香。
        香亦竟不灭，人亦竟不来。
        相思黄叶落，白露湿青苔。
    </p>
</body>
<script>
    let p = document.querySelector(".stepIn");
    let content = p.textContent;
    console.log(content);
    
    let arr =  p.textContent.split("");
    console.log(arr);
    p.textContent = '';
    // 遍历数组
    arr.forEach((ele)=>{
        // 创建span元素，盛放遍历出的每个字
        let span = document.createElement("span")
        // 
        span.textContent = ele
        p.append(span)
    });
</script>
</html>